<template><div><h1 id="动画" tabindex="-1"><a class="header-anchor" href="#动画" aria-hidden="true">#</a> 动画</h1>
<h2 id="_1-隐式动画" tabindex="-1"><a class="header-anchor" href="#_1-隐式动画" aria-hidden="true">#</a> 1. 隐式动画</h2>
<p>所谓隐式动画就是只需要设置动画目标，过程控制由系统实现</p>
<p>一般是简单点的动画，比如只是简单的宽高变化。当然使用简单不代表功能就简单，下面会有体现</p>
<p>没有循环重播，不用随时中断，没有多方协调，就是从开始运行到结束。</p>
<p>这种动画一般就是隐式动画，使用flutter提供的api，隐式动画一般是<code v-pre>Animated...</code>开头。所以，便于学习记忆</p>
<p>还可以自定义隐式动画：<code v-pre>TweenAnimationBuilder</code></p>
<p><strong><code v-pre>AnimatedSwitcher</code></strong></p>
<p>不同控件间切换的过渡动画</p>
<p>依然是个<code v-pre>widget</code>，是个盒子，但是该盒子是用于处理内部child组件切换时候动画的。</p>
<p>也是只有一个属性：<code v-pre>duration</code>。<code v-pre>flutter</code>会隐式帮我们处理动画过程</p>
<blockquote>
<p>但是当子组件没有变化的时候，就没有动画了</p>
</blockquote>
<p>比如：<code v-pre>AnimatedSwitcher</code>内的<code v-pre>child</code>组件是个<code v-pre>text</code>，<code v-pre>text</code>内容有变化的时候，就不会有动画，这是因为<code v-pre>flutter</code>判断<code v-pre>child</code>子组件没有发生变化，就没有触发动画过程</p>
<p>所以，只需要给组件设置一个<code v-pre>key</code>即可。可以如下简单的设置一下：<code v-pre>UniqueKey</code>，表示自己唯一的<code v-pre>key</code></p>
<div class="language-undefined line-numbers-mode" data-ext="undefined"><pre v-pre class="language-undefined"><code>key: UniqueKey()
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote>
<p>demo</p>
</blockquote>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">return</span> <span class="token class-name">AnimatedContainer</span><span class="token punctuation">(</span>
      duration<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>milliseconds<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token class-name">AnimatedSwitcher</span><span class="token punctuation">(</span>
          duration<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>milliseconds<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token comment">//当内容有变化的时候就会触发动画</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'content'</span></span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token class-name">UniqueKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token comment">// 丰富的动画控制</span>
          transitionBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>child<span class="token punctuation">,</span> animation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token class-name">FadeTransition</span><span class="token punctuation">(</span>
              opacity<span class="token punctuation">:</span> animation<span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token class-name">ScaleTransition</span><span class="token punctuation">(</span>
                scale<span class="token punctuation">:</span> animation<span class="token punctuation">,</span>
                child<span class="token punctuation">:</span> child<span class="token punctuation">,</span>
              <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-显式动画" tabindex="-1"><a class="header-anchor" href="#_2-显式动画" aria-hidden="true">#</a> 2. 显式动画</h2>
<p>常见的显式动画有<code v-pre>RotationTransition</code>、<code v-pre>FadeTransition</code>、<code v-pre>ScaleTransition</code>、<code v-pre>SlideTransition</code>、<code v-pre>AnimatedIcon</code>。在显示动画中开发者需要创建一个<code v-pre>AnimationController</code>，通过<code v-pre>AnimationController</code> 控制动画的开始、暂停、重置、跳转、倒播等</p>
<ul>
<li><code v-pre>RotationTransition</code> 旋转</li>
<li><code v-pre>FadeTransition</code> 透明度</li>
<li><code v-pre>ScaleTransition</code> 缩放</li>
<li><code v-pre>SlideTransition</code> 移动</li>
<li><code v-pre>AnimatedIcon</code> 动画图标</li>
</ul>
<h3 id="lowerbound-upperbound" tabindex="-1"><a class="header-anchor" href="#lowerbound-upperbound" aria-hidden="true">#</a> <code v-pre>lowerBound</code> <code v-pre>upperBound</code></h3>
<p><code v-pre>AnimationController </code>用于控制动画，它包含动画的启动<code v-pre> forward()</code>、停止 <code v-pre>stop()</code> 、反向播放<code v-pre>reverse() </code>等方法。 <code v-pre>AnimationController</code> 会在动画的每一帧，就会生成一个新的值。默认情况 下， <code v-pre>AnimationController </code>在给定的时间段内线性的生成从 0.0 到1.0（默认区间）的数字 ，我们也 可以通过 <code v-pre>lowerbound</code>和 <code v-pre>upperBound </code>来修改 <code v-pre>AnimationController </code>生成数字的区间。</p>
<h3 id="animationcontroller普通用法" tabindex="-1"><a class="header-anchor" href="#animationcontroller普通用法" aria-hidden="true">#</a> <code v-pre>AnimationController</code>普通用法</h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">Dome1</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">Dome1</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Dome1</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_Dome1State</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> _Dome1State <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Dome1</span><span class="token punctuation">></span></span> <span class="token keyword">with</span> <span class="token class-name">SingleTickerProviderStateMixin</span> <span class="token punctuation">{</span>
  late <span class="token class-name">AnimationController</span> _container<span class="token punctuation">;</span>
  <span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: implement initState</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    _container <span class="token operator">=</span> <span class="token class-name">AnimationController</span><span class="token punctuation">(</span>
        vsync<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token comment">// 让程序和手机的刷新频率统一</span>
        duration<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
      child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>
        children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token class-name">RotationTransition</span><span class="token punctuation">(</span>
            turns<span class="token punctuation">:</span> _container<span class="token punctuation">,</span>
            child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span>
              size<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
            height<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">Flex</span><span class="token punctuation">(</span>
            direction<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>horizontal<span class="token punctuation">,</span>
            mainAxisAlignment<span class="token punctuation">:</span> <span class="token class-name">MainAxisAlignment</span><span class="token punctuation">.</span>spaceAround<span class="token punctuation">,</span>
            children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
              <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
                  onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    _container<span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 重复播放</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"repeat"</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
                  onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    _container<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 播放一次</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"forward"</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
                  onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    _container<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 倒叙播放</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"reverse"</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
                  onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    _container<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 停止播放</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"stop"</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="链式操作修改动画效果" tabindex="-1"><a class="header-anchor" href="#链式操作修改动画效果" aria-hidden="true">#</a> 链式操作修改动画效果</h3>
<p>**Curve：**动画曲线，作用和<code v-pre>Android</code>中的<code v-pre>Interpolator</code>（差值器）类似，负责控制动画变化的速率，通俗地讲就是使动画的效果能够以匀速、加速、减速、抛物线等各种速率变化。</p>
<p>**Tween：**将 <code v-pre>AnimationController </code>生成的 [0,1]值映射成其他属性的值，比如颜色、样式等。</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code>_container<span class="token punctuation">.</span><span class="token function">drive</span><span class="token punctuation">(</span>
  <span class="token class-name">Tween</span><span class="token punctuation">(</span>
    begin<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Offset</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
    end<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Offset</span><span class="token punctuation">(</span><span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">chain</span><span class="token punctuation">(</span> <span class="token comment">// 配置动画效果</span>
    <span class="token class-name">CurveTween</span><span class="token punctuation">(</span>curve<span class="token punctuation">:</span> <span class="token class-name">Curves</span><span class="token punctuation">.</span>bounceInOut<span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">chain</span><span class="token punctuation">(</span>
    <span class="token class-name">CurveTween</span><span class="token punctuation">(</span>curve<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Interval</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">,</span><span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//当前时间点的20%开始，80%结束</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


